<template>
  <div style="margin-top: 20px">
    <div style="text-align: left">
      <el-tag type="success">操作选项</el-tag>
      <el-switch
          ref="editSwitch"
          v-model="isEdit"
          active-text="编辑"
          inactive-text="查看"
          style="margin-left: 2%"
          @change="switchChange"
      >
      </el-switch>
    </div>
    <el-form ref="form" :model="form" label-width="80px" :disabled="disabForm">
      <el-row>
        <el-col :span="10">
          <el-form-item label="菜单名称" style="margin-bottom:10px;">
            <el-input v-model="form.menu_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="菜单图标" style="margin-bottom:10px;">
            <el-input v-model="form.menu_icon"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="序号" style="margin-bottom:10px;">
            <el-input v-model="form.menu_number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="菜单链接" style="margin-bottom:10px;">
            <el-input v-model="form.menu_url"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" v-if="isIF">
          <el-form-item label="菜单ID" style="margin-bottom:10px;">
            <el-input v-model="form.menu_pk"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" v-if="isIF">
          <el-form-item label="父菜单ID" style="margin-bottom:10px;">
            <el-input v-model="form.menu_parent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="状态" style="margin-bottom:10px;text-align: left;">
            <el-radio v-model="form.menu_status" label="1">启用</el-radio>
            <el-radio v-model="form.menu_status" label="0">禁用</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="类型" style="margin-bottom:10px;text-align: left;">
            <el-radio v-model="form.menu_type" label="0">菜单</el-radio>
            <el-radio v-model="form.menu_type" label="1">按钮</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="上级菜单" style="margin-bottom:10px;">
          <el-col :span="10">
            <el-tree
                :highlight-current="true"
                ref="menu_tree"
                node-key="menu_pk"
                :data="treeData"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :default-expanded-keys="keyArry"
                style="width:90%;"
            >
            </el-tree>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <span style="text-align: center;display: block" v-if="isIFButton">
      <el-button type="primary" @click="save">保 存</el-button>
    </span>
  </div>
</template>
<script>
export default {
  name: "cesView",
  inject: ['refresh'],
  props: {
    data: {
      menu_pk: '',
      sys_type:'',
    }
  },
  data() {
    return {
      url_menu: '/auth/menu/getMenuInfo',
      url_tree: '/auth/menu/tree_menu_list',
      url_save: '/auth/menu/menuSaveUpdate',
      form: {
        menu_name: '',
        menu_pk: '',
        menu_parent: '',
        menu_url: '',
        menu_icon: '',
        menu_number: '',
        menu_status: '',
        menu_type: '',
      },
      isEdit: false,
      disabForm: true,
      isIF: true,
      isIFButton: false,
      treeData:[],
      defaultProps: {
        children: 'children',
        label: 'menu_name',
      },
      keyArry:[],

    }
  },
  //生命周期函数
  created() {

  },
  methods: {
    //获取菜单信息
    getMenuInfo(menu_pk) {
      if (menu_pk != null && menu_pk != '' && menu_pk != undefined) {
        this.$post(this.url_menu, {menu_pk: menu_pk}).then(res => {
          if (res) {
            this.form = res;
          }
        });
      }
    },
    //选择器改变事件
    switchChange(value){
      console.log(value);
      if (value == false){
        this.isEdit = false;
        this.disabForm = true;
        this.isIF = true;
        this.isIFButton = false;
      }else {
        this.isEdit = true;
        this.disabForm = false;
        this.isIF = false;
        this.isIFButton = true;
      }
    },
    //选中菜单树节点事件
    handleNodeClick(data) {
      console.log(data);
      this.form.menu_parent = data.menu_pk;
    },
    //获取菜单树
    getMenuTree(){
      this.keyArry = [];
      this.data.menu_status = '1';
      this.data.menu_parent = '0';
      this.$post(this.url_tree,this.data).then(res => {
        if(res){
          this.treeData = res;
          //回显上级菜单
          this.getParentID(this.data.menu_pk)
        }
      })
    },
    //获取父菜单ID
    getParentID(menu_pk){
      this.$post(this.url_menu, {menu_pk: menu_pk}).then(res => {
        if (res) {
          //回显上级菜单
          this.keyArry.push(res.menu_parent);
          //初始化父ID值
          this.form.menu_parent = res.menu_parent;
          //默认选中该节点样式
          this.$nextTick(() => {
            // tree 元素的ref   value 绑定的node-key
            this.$refs.menu_tree.setCurrentKey(res.menu_parent);
          });
        }
      });
    },
    save(){
      delete this.form.children;
      this.$post(this.url_save, this.form).then(res => {
        this.$message({
          type : res.code,
          message: res.msg,
        });
        if (res.code == 'success'){
          //转换为查看模式
          this.switchChange(false);
          //刷新本页菜单树
          this.getMenuTree();
          //刷新左侧菜单树
          this.refresh(this.form.menu_pk);
        }
      });
    }
  },
  mounted() {

  },
  watch: {
    'data.menu_pk': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.getMenuInfo(newValue);
          this.getMenuTree();
        }
      }
    }
  },
}
</script>
<style>
/* .el-input--suffix .el-input__inner {
  padding-right: 98px;
} */
</style>